<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魅族官网</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="./css/reset.css">
    <link rel="stylesheet" type="text/css" href="./css/base.css">
    <link rel="stylesheet" type="text/css" href="./css/header.css">
    <link rel="stylesheet" type="text/css" href="./css/search.css">
    <link rel="stylesheet" type="text/css" href="./css/content.css">
    <link rel="stylesheet" type="text/css" href="./css/banner.css">
    <link rel="stylesheet" type="text/css" href="./css/hotlinks.css">
    <link rel="stylesheet" type="text/css" href="./css/footer.css">
    <link rel="stylesheet" type="text/css" href="./css/copyright.css">
</head>
<body>
    <!-- header区域开始 -->
    <div class="header">
       <div class="header-c inner-c">
            <div class="header-left">
                <a href="#">魅族官网</a>
                <a href="#">魅族商城</a>
                <a href="#">Flyme</a>
                <a href="#">专卖店</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
            </div>
            <div class="header-right">
                <a href="#">我的收藏<i>new</i></a>
                <a href="#">我的订单</a>
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
        </div>
    </div>  
    </div>
    <!-- header区域结束 -->
    <!-- search区域开始 -->
    <div class="search">
        <div class="inner-c search-c">
            <div class="logo">
                <h1><img src="./images/logo.png" alt=""></h1> 
                <div class="arow-code">
                    <dl >
                        <dd><a href="#">全部商品分类</a> </dd>
                        <dd><a href="#">手机</a></dd>
                        <dd><a href="#">智能硬件</a></dd>
                        <dd><a href="#">耳机 / 音箱</a></dd>
                        <dd><a href="#">路由器 / 移动电源</a></dd>
                        <dd><a href="#">保护套 / 后盖 / 贴膜</a></dd>
                        <dd><a href="#">数据线 / 电源适配器</a></dd>
                        <dd><a href="#">周边配件</a></dd>
                    </dl>
                </div>
            </div>
            <div class="nav">
                <a href="">PRO手机</a>
                <a href="">魅蓝手机</a>
                <a href="">MX手机</a>
                <a href="">精选配件</a>
                <a href="">智能硬件</a>
            </div>
        </div>
    </div>
    <!-- search区域结束 -->
    <!-- content区域开始 -->
    <div class="content">
        <div class="inner-c">
        <!-- 焦点图开始 -->
            <div class="banner">
                <ul>
                    <li><a href=""><img src="./images/beijing.jpeg" alt=""></a></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="btn">
                    <span class="left-btn"></span>
                    <span class="right-btn"></span>
                </div>
                <ol>
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
                <div class="bottom">
                    <ul>
                        <li>
                            <div >
                                <p><img src="./images/mtong.png" alt=""></p>
                                <h3>M码通道</h3>
                            </div>
                            <div >
                                <p><img src="./images/huanxin.png" alt=""></p>
                                <h3>以旧换新</h3>
                            </div>
                            <div >
                                <p><img src="./images/bao.png" alt=""></p>
                                <h3>魅族意外保</h3>
                            </div>
                            <div >
                                <p><img src="./images/chaxun.png" alt=""></p>
                                <h3>回购单查询</h3>
                            </div>
                        </li>
                        <li><img src="./images/pinpai.jpg" width="255" height="150"></li>
                        <li><img src="./images/meilan.jpg" width="255" height="150"></li>
                        <li><img src="./images/dianyuan.jpg" width="255" height="150"></li>
                        <li><img src="./images/jiluyi.png" width="255" height="150"></li>
                    </ul>
                </div>
            </div>
        <!-- 焦点图结束 -->
        <!-- 热门链接开始 -->
            <div class="hotlink">
                <div class="title">
                    <h1>手机</h1>
                    <a href="" class="look-more">展开</a>
                    <span></span>
                </div>
                <div class="detail">
                     <ul>
                        <li>
                            <div class="top1">
                                <img src="./images/shouji3.png" alt="">
                                <span>热卖</span>
                            </div>
                            <div class="bottom1">
                                 <h3>魅蓝note3</h3>
                                 <p class="date">11日-12日 限量开售</p>
                                 <p class="price">¥ 799</p>
                            </div>
                        </li>
                        <li>
                            <div class="top1">
                                <img src="./images/shouji4.png" alt="">
                            </div>
                            <div class="bottom1">
                                 <h3>魅蓝note</h3>
                                 <p class="date">11日-12日 公开版限量开售 </p>
                                 <p class="price">¥ 599</p>
                            </div>
                        </li>
                        <li>
                            <div class="top1">
                                <img src="./images/shouji1.png" alt="">
                                <span class="tehui">特惠</span>
                            </div>
                            <div class="bottom1">
                                 <h3>魅蓝3s</h3>
                                 <p class="date">11日-12日 限量开售</p>
                                 <p class="price">¥ 699</p>
                            </div>
                        </li>
                        <li>
                            <div class="top1">
                                <img src="./images/shouji2.png" alt="">
                                <span>热卖</span>
                            </div>
                            <div class="bottom1">
                                 <h3>魅蓝metal</h3>
                                 <p class="date">领券立减100元</p>
                                 <p class="price">¥ 999</p>
                            </div>
                        </li>
                        <li>
                            <div class="top1">
                                <img src="./images/shouji5.png" alt="">
                                <span>热卖</span>
                            </div>
                            <div class="bottom1">
                                 <h3>魅蓝E</h3>
                                 <p class="date">全网通 多彩金属机身</p>
                                 <p class="price">¥ 1299</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 热门链接结束 -->
        <!-- footer区域开始 -->
            <div class="footer">
                <div class="left">
                    <dl>
                        <dt>帮助说明</dt>
                        <dd><a href="">支付方式</a></dd>
                        <dd><a href="">配送说明</a></dd>
                        <dd><a href="">售后服务</a></dd>
                        <dd><a href="">付款帮助</a></dd>
                    </dl>
                    <dl>
                        <dt>Flyme</dt>
                        <dd><a href="">开放平台</a></dd>
                        <dd><a href="">固件下载</a></dd>
                        <dd><a href="">软件商店</a></dd>
                        <dd><a href="">查找手机</a></dd>
                    </dl>
                    <dl>
                        <dt>关于我们</dt>
                        <dd><a href="">关于魅族</a></dd>
                        <dd><a href="">加入我们</a></dd>
                        <dd><a href="">联系我们</a></dd>
                        <dd><a href="">法律声明</a></dd>
                    </dl>
                    <dl>
                        <dt>关注我们</dt>
                        <dd><a href="">新浪微博</a></dd>
                        <dd><a href="">腾讯微博</a></dd>
                        <dd><a href="">QQ空间</a></dd>
                        <dd><a href="">官方微信</a></dd>
                    </dl>
                </div>
                <div class="right">
                    <h2>24小时全国服务热线</h2>
                    <p>400-788-3333</p>
                    <a class="chat"><i></i>24小时在线客服</a>
                </div>
            </div>
    <!-- footer区域结束 -->
        </div>
    </div>
    <!-- content区域结束 -->
    <!-- copyright区域开始 -->
    <div class="copyright">
        <div class="copyright-c">
            <p>©2016 Meizu Telecom Equipment Co., Ltd. All rights reserved.   </p>
            <a href="#">备案号：粤ICP备13003602号-2</a>
            <a href="#">经营许可证编号：粤B2-20130198</a>
            <a href="#">营业执照<i></i></a>
        </div>
    </div>
    <!-- copyright区域结束 -->
</body>
</html>